<template>
  <div class="con table-gl-con">
    <a-layout class="layout-con">
      <a-layout-sider class="sider">
        <div class="title">订单详情</div>
        <div class="order-billno">
          <span class="title-label-text">订单号：</span>
          <div style="height: 30px">
            <a-typography-paragraph copyable v-if="detailInfo.orderNumber"> {{ detailInfo.orderNumber }}</a-typography-paragraph>
            <span v-else>--</span>
          </div>
        </div>

        <ul>
          <li>
            <span class="label-text">平台：</span>
            <span>{{ detailInfo.platform }} </span>
          </li>
          <li>
            <span class="label-text">订单来源：</span>
            <span>{{ detailInfo.source ? detailInfo.source : '--' }} </span>
          </li>
          <li>
            <span class="label-text">平台单号：</span>
            <a-typography-paragraph copyable style="margin-bottom: 0; display: flex">
              <div class="text-limit" style="width: 140px">{{ detailInfo.platformOrderNumber }}</div>
            </a-typography-paragraph>
          </li>
          <li>
            <span class="label-text">商家订单号：</span>
            <span>{{ detailInfo.merchantOrderNumber ? detailInfo.merchantOrderNumber : '--' }} </span>
          </li>
          <li>
            <span class="label-text">履约方式：</span>
            <span>{{ detailInfo.fulfillmentType ? detailInfo.fulfillmentType : '--' }} </span>
          </li>
          <li>
            <span class="label-text">店铺：</span>
            <span>{{ detailInfo.shopName ? detailInfo.shopName : '--' }} </span>
          </li>
          <li>
            <span class="label-text">站点：</span>
            <span>{{ detailInfo.marketplaceName ? detailInfo.marketplaceName : '--' }} </span>
          </li>
          <li>
            <span class="label-text">买家姓名：</span>
            <span>{{ detailInfo.buyerName ? detailInfo.buyerName : '--' }} </span>
          </li>
          <li class="clearfix">
            <div class="label-text fl">买家邮箱：</div>
            <div class="fl">
              <TextHidden position="top">{{ detailInfo.buyerEmail ? detailInfo.buyerEmail : '--' }}</TextHidden>
            </div>
          </li>
          <li>
            <span class="label-text">发货仓：</span>
            <span>{{ filterPackage(detailInfo).warehouseName || '--' }} </span>
          </li>
          <li style="margin-top: 15px">
            <span class="label-text">物流等级：</span>
            <span>{{ filterLevel() }} </span>
          </li>
          <li>
            <span class="label-text">承运商：</span>
            <span>{{ filterPackage(detailInfo).carrier || '--' }} </span>
          </li>
          <li>
            <span class="label-text">物流渠道：</span>
            <span>{{ filterPackage(detailInfo).shippingMethodName || '--' }} </span>
          </li>
          <li style="margin-bottom: 15px">
            <span class="label-text">物流跟踪号：</span>
            <span>
              <a-typography-paragraph copyable style="margin-bottom: 0; display: flex">
                <div class="text-limit" style="width: 140px">{{ filterPackage(detailInfo).trackingNumber || '--' }}</div>
              </a-typography-paragraph>
            </span>
          </li>

          <li>
            <span class="label-text">创建时间：</span>
            <span>{{ $setTime(detailInfo.gmtCreate) }} </span>
          </li>
          <li>
            <span class="label-text">下单时间：</span>
            <span>{{ $setTime(detailInfo.gmtPurchase) }} </span>
          </li>
          <li>
            <span class="label-text">支付时间：</span>
            <span>{{ $setTime(detailInfo.gmtPay) }} </span>
          </li>
          <li>
            <span class="label-text">实际发货时间：</span>
            <span>{{ $setTime(detailInfo.gmtShip) }} </span>
          </li>
        </ul>
      </a-layout-sider>

      <a-layout-content class="content">
        <div class="top">
          <div class="log">
            <a-button class="gray-outline" @click="showLogDialog = true">
              <template #icon>
                <span class="icon icon-jurassic_log"></span>
              </template>
              日志
            </a-button>
          </div>

          <div>
            <span style="font-size: 16px">{{ detailInfo.platformOrderNumber }}</span>
            <span class="status">{{ filterStatus(detailInfo.status) }}</span>
            <span class="type">{{ detailInfo.fulfillmentType }}</span>
          </div>
          <div>
            <span>标签：</span>
            <a-tag v-for="(item, index) of tagList" :style="{ marginLeft: '5px', color: '#2C4358', background: item.color }" style="margin-right: 5px;color">{{ item.name }}</a-tag>
          </div>
          <div style="margin-top: 5px">
            <span>承诺发货时间：</span>
            <span>{{ $setTime(detailInfo.gmtLatestShip) }}</span>
            <span style="margin-left: 10px; color: red">
              <span>剩余</span>
              <a-countdown class="cut-down-time" :now="now" :value="detailInfo.gmtLatestShip ? new Date(detailInfo.gmtLatestShip).valueOf() : now" format="D 天 H 时 m 分 s 秒" />
            </span>
          </div>
        </div>
        <div class="middle">
          <div class="left">
            <div class="title"> 配送地址 </div>
            <div class="left-con">
              <ul>
                <li>
                  <span>收件人：</span>
                  <span>{{ $extract(detailInfo, 'address.userName') || '--' }}</span>
                </li>
                <li>
                  <span>国家：</span>
                  <span>{{ $extract(detailInfo, 'address.country') || '--' }}</span>
                </li>
                <li>
                  <span>电话：</span>
                  <span>{{ $extract(detailInfo, 'address.phoneNumber') || '--' }}</span>
                </li>
                <li>
                  <span>省/州：</span>
                  <span>{{ $extract(detailInfo, 'address.stateOrRegion') || '--' }}</span>
                </li>
                <li>
                  <span>邮编：</span>
                  <span>{{ $extract(detailInfo, 'address.postalCode') || '--' }}</span>
                </li>
                <li>
                  <span>城市：</span>
                  <span>{{ $extract(detailInfo, 'address.city') || '--' }}</span>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址1：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address') }}</TextLimit> -->
                  </div>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址2：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address1') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address1') }}</TextLimit> -->
                  </div>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址3：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address2') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address2') }}</TextLimit> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="title"> 订单备注 </div>
            <a-scrollbar style="height: 150px; overflow: auto" class="right-con">
              <ul>
                <li v-for="item of remarkList">
                  <div class="top">
                    <div>{{ item.createUname.slice(0, 1) }}</div>
                    <div>{{ item.createUname }}</div>
                    <div>{{ $setTime(item.gmtCreate) }}</div>
                  </div>
                  <div class="text">
                    <TextLimit position="top">{{ item.remark }} </TextLimit>
                  </div>
                </li>
              </ul>
            </a-scrollbar>
          </div>
        </div>
        <div class="footer">
          <a-tabs v-model:active-key="currentPage">
            <a-tab-pane key="1" title="订单明细" class="tab-pane">
              <a-button class="gray-outline" :loading="updateUserLoading" @click="updateSacles" v-if="$authPass('oms.order.fba.syncProductRelated')">更新SKU及销售员</a-button>
              <a-table :data="itemList" :pagination="false" style="margin-top: 10px" size="mini" class="table-two-line" :scroll="{ y: 'calc( 100vh - 501px )' }">
                <template #columns>
                  <a-table-column title="图片" :width="40" #cell="{ record }">
                    <ImgPopover :src="record.productPic">
                      <template #con>
                        <a-image :preview="false" width="40" height="40" fit="contain" :src="record.productPic" />
                      </template>
                    </ImgPopover>
                  </a-table-column>
                  <a-table-column title="商品名称" :width="120" #cell="{ record }">
                    <!-- {{ record.productName }} -->
                    <TextLimit position="top" :rows="1">{{ record.productName }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="MSKU/ASIN" :width="120" #cell="{ record }">
                    <div class="highlight">{{ record.msku ? record.msku : '--' }}</div>
                    <div class="highlight">{{ record.asin ? record.asin : '--' }}</div>
                  </a-table-column>
                  <a-table-column title="SKU/类目" :width="120" #cell="{ record }">
                    <div class="highlight">{{ record.productSku ? record.productSku : '--' }}</div>
                    <div class="highlight">{{ record.productCategoryName ? record.productCategoryName : '--' }}</div>
                  </a-table-column>
                  <a-table-column title="销售员" :width="80" #cell="{ record }">
                    {{ record.salerName }}
                  </a-table-column>
                  <a-table-column title="购买数量" :width="60" #cell="{ record }">
                    {{ record.qtyOrdered }}
                  </a-table-column>
                  <a-table-column title="售价" :width="60" #cell="{ record }">
                    <div class="highlight" v-if="record.amtSell">${{ record.amtSell }}</div>
                  </a-table-column>
                  <a-table-column title="优惠" :width="40" #cell="{ record }">
                    <div class="highlight" v-if="record.amtDiscount">${{ record.amtDiscount }}</div>
                  </a-table-column>
                  <a-table-column title="单价" :width="40" #cell="{ record }">
                    <div class="highlight" v-if="record.amtSell">${{ record.amtSell }}</div>
                  </a-table-column>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" title="订单费用" class="tab-pane">
              <p>
                <span>订单汇率：1 美元 = {{ feeData.toCnyRate }} 人民币</span>
                <span style="margin-left: 10px">订单合计毛利：￥{{ feeData.totalGrossProfit }}</span>
              </p>

              <a-table :data="feeData.amountList" :bordered="{ cell: true }" :pagination="false" style="margin-top: 10px" size="mini" class="table-two-line" :scroll="{ y: '400px' }">
                <template #columns>
                  <a-table-column title="图片" :width="60" #cell="{ record, rowIndex }">
                    <!-- <a-image width="40px" :src=""></a-image> -->
                    <ImgPopover :src="record.productPic">
                      <template #con>
                        <a-image :preview="false" width="40" height="40" fit="contain" :src="record.productPic" />
                      </template>
                    </ImgPopover>
                  </a-table-column>
                  <a-table-column title="MSKU/ASIN" :width="120" #cell="{ record }">
                    <div class="highlight">
                      {{ record.msku ? record.msku : '--' }}
                    </div>
                    <div class="highlight">
                      {{ record.asin ? record.asin : '--' }}
                    </div>
                  </a-table-column>
                  <a-table-column title="SKU" :width="120" #cell="{ record }">
                    <div class="highlight">
                      {{ record.productSku ? record.productSku : '--' }}
                    </div>
                  </a-table-column>
                  <a-table-column title="数量" :width="100" #cell="{ record }">
                    <div class="highlight">
                      {{ record.qtyOrdered ? record.qtyOrdered : '--' }}
                    </div>
                  </a-table-column>
                  <a-table-column :title="getTitle('收益')">
                    <a-table-column title="售价" :width="100" #cell="{ record }">
                      {{ $extract(record, 'sell.amount') }}
                    </a-table-column>
                    <a-table-column title="优惠" :width="100" #cell="{ record }">
                      {{ $extract(record, 'discount.amount') }}
                    </a-table-column>
                    <a-table-column title="包装" :width="100" #cell="{ record }">
                      {{ $extract(record, 'packageSell.amount') }}
                    </a-table-column>
                    <a-table-column title="运费" :width="100" #cell="{ record }">
                      {{ $extract(record, 'ship.amount') }}
                    </a-table-column>
                    <a-table-column title="税费" :width="100" #cell="{ record }">
                      {{ $extract(record, 'tax.amount') }}
                    </a-table-column>
                    <a-table-column title="其他" :width="100" #cell="{ record }">
                      {{ $extract(record, 'otherRevenue.amount') }}
                    </a-table-column>
                    <a-table-column title="合计" :width="100" #cell="{ record }">
                      <div>{{ $extract(record, 'totalRevenue.amount') }}</div>
                      <div>￥{{ $extract(record, 'totalRevenueCny.amount') }}</div>
                    </a-table-column>
                  </a-table-column>
                  <a-table-column :title="getTitle('平台支出')">
                    <a-table-column title="佣金" :width="100" #cell="{ record }">
                      {{ $extract(record, 'platCommission.amount') }}
                    </a-table-column>
                    <a-table-column title="扣税" :width="100" #cell="{ record }">
                      {{ $extract(record, 'platTax.amount') }}
                    </a-table-column>
                    <a-table-column title="FBA运费" :width="100" #cell="{ record }">
                      {{ $extract(record, 'platShip.amount') }}
                    </a-table-column>
                    <a-table-column title="其他支出" :width="100" #cell="{ record }">
                      {{ $extract(record, 'platOtherExpend.amount') }}
                    </a-table-column>
                    <a-table-column title="合计" :width="100" #cell="{ record }">
                      <div>{{ $extract(record, 'totalExpend.amount') }}</div>
                      <div>￥{{ $extract(record, 'totalExpendCny.amount') }}</div>
                    </a-table-column>
                  </a-table-column>
                  <a-table-column title="成本(CNY)">
                    <a-table-column title="FBM运费" :width="100" #cell="{ record }">
                      {{ $extract(record, 'fbmShip.amount') }}
                    </a-table-column>
                    <a-table-column title="产品成本" :width="100" #cell="{ record }">
                      {{ $extract(record, 'productCost.amount') }}
                    </a-table-column>
                    <a-table-column title="包材成本" :width="100" #cell="{ record }">
                      {{ $extract(record, 'packageCost.amount') }}
                    </a-table-column>
                    <a-table-column title="其他成本" :width="100" #cell="{ record }">
                      {{ $extract(record, 'otherCost.amount') }}
                    </a-table-column>
                    <a-table-column title="合计" :width="100" #cell="{ record }">
                      {{ $extract(record, 'totalCost.amount') }}
                    </a-table-column>
                  </a-table-column>
                  <a-table-column title="毛利润(CNY)" :width="100" #cell="{ record }">
                    {{ $extract(record, 'grossProfit.amount') }}
                  </a-table-column>
                  <a-table-column title="毛利率" :width="100" #cell="{ record }">
                    {{ record.grossProfitRate }}
                  </a-table-column>
                </template>
              </a-table>

              <p style="margin: 5px 0; font-size: 14px">亚马逊订单财务数据</p>

              <div style="display: flex">
                <FilterTable :filterItem="filterItem" :isReset="false" :is-show-tag="false" @search="searchByVal" />
                <a-button class="gray-outline" :loading="getOrderFinanceLoading" @click="getSyncAmzOrderFinancials">获取订单财务信息</a-button>
              </div>
              <a-table :data="financialDataList" :bordered="{ cell: true }" :pagination="false" style="margin-top: 0px" size="mini" class="table-two-line" :scroll="{ y: '400px' }">
                <template #columns>
                  <a-table-column title="序号" :width="40" #cell="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </a-table-column>
                  <a-table-column title="结算时间" :width="140" #cell="{ record }">
                    {{ $setTime(record.gmtPosted) }}
                  </a-table-column>
                  <a-table-column title="originItemId" :width="140" #cell="{ record }">
                    {{ record.platOrderItemId }}
                  </a-table-column>
                  <a-table-column title="MSKU" :width="120" #cell="{ record }">
                    {{ record.msku }}
                  </a-table-column>
                  <a-table-column title="费用类型" :width="60" #cell="{ record }">
                    <TextLimit position="top" :rows="2">{{ record.eventType }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="数量" :width="60" #cell="{ record }">
                    {{ record.qtyShipped }}
                  </a-table-column>
                  <a-table-column title="费用项目" :width="60" #cell="{ record }">
                    <TextLimit position="top" :rows="2">{{ record.amountType }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="金额(市场货币)" :width="100" #cell="{ record }">
                    {{ record.amount }}
                  </a-table-column>
                  <a-table-column title="金额(CNY)" :width="80" #cell="{ record }">
                    {{ record.amountCny }}
                  </a-table-column>
                  <a-table-column title="更新时间" :width="140" #cell="{ record }">
                    {{ $setTime(record.gmtWrite) }}
                  </a-table-column>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
  <CommonLogsDialog v-if="showLogDialog" api="listOrderLogs" :id="id" :isShow="showLogDialog" @closed="showLogDialog = false" />
</template>

<script lang="ts">
  import { defineComponent, ref, onUnmounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { reactive } from 'vue'
  import { toRefs } from 'vue'
  import { getShopMarketAll } from '@/api/base'
  import { getRelatedById, matchingProduct, listVOByParam, syncAmzOrderFinancials } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import useVisitedRouteStore from '@/store/modules/visited-routes'
  import FilterTable from '@/components/TableFilter.vue'
  import TextLimit from '@/components/textLimit.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import dayjs from 'dayjs'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      FilterTable,
      TextLimit,
      CommonLogsDialog,
    },
    setup() {
      const route = useRoute()
      const visitedRoute = useVisitedRouteStore()
      const data: any = reactive({
        currentPage: '1',
        now: Date.now(),
        feeData: [],
        financialDataList: [],
        updateUserLoading: false,
        getOrderFinanceLoading: false,
        filterItem: [
          {
            key: 'mskuList',
            label: '请输入MSKU',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'eventTypeList',
            label: '费用类型',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'amountTypeList',
            label: '费用项目',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'date',
            label: '结算日期',
            value: ref(),
            type: 'date_range',
            width: 240,
            attrs: {
              placeholder: ['结算开始日期', '结算结束日期'],
              // defaultValue: [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, `${dayjs().add(1, 'month').format('YYYY-MM-DD')} 23:59:59`],
              'allow-clear': true,
            },
          },
        ],
        detailInfo: {},
        tagList: [],
        remarkList: [],
        itemList: [],
        searchValue: {},
        showLogDialog: false,
        id: '',
      })

      const searchByVal = (val: any) => {
        console.log(val)

        let obj = _.cloneDeep(val)
        data.searchValue = {}
        for (const key in obj) {
          if (key == 'date' && obj[key]) {
            data.searchValue.startDate = `${obj[key][0]} 00:00:00`
            data.searchValue.endDate = `${obj[key][1]} 23:59:59`
          } else {
            data.searchValue[key] = obj[key]
          }
        }
        getListVOByParam()
      }

      // onUnmounted(() => {
      //   visitedRoute.removeVisitedRoute(route)
      // })

      const getDetail = async () => {
        data.id = route.query.id
        const res = await getRelatedById({ id: route.query.id })
        data.detailInfo = res?.data
        data.tagList = data.detailInfo?.tagList || []
        data.remarkList = data.detailInfo?.remarkList || []
        data.itemList = data.detailInfo?.itemList || []
        data.feeData = data?.detailInfo.packOrderAmountVOList[0] || {}
        // debugger

        getMarketList()
      }

      const getMarketList = async () => {
        const res = await getShopMarketAll()
        let arr = res?.data || []

        let obj = arr.find((e: any) => e.marketplaceId == data.detailInfo.marketplaceId)
        data.detailInfo.marketplaceName = obj?.marketplaceName
      }

      const filterLevel = () => {
        let text = ''
        let flag = data.detailInfo.packageList && data.detailInfo.packageList[0] ? data.detailInfo.packageList[0].shippingLevel : ''
        if (flag == 'Standard') {
          text = '标准'
        } else if (flag == 'Expedited') {
          text = '加急'
        } else {
          text = '--'
        }
        return text
      }

      const filterStatus = (num: number) => {
        let text = ''
        if (num >= -199 && num <= -100) {
          text = '已取消'
        } else if (num >= 100 && num <= 199) {
          text = ' 待支付'
        } else if (num >= 200 && num <= 299) {
          text = ' 待发货'
        } else if (num >= 600 && num <= 699) {
          text = ' 已发货'
        } else if (num >= 800 && num <= 899) {
          text = ' 已完成'
        }
        return text
      }

      const updateSacles = async () => {
        data.updateUserLoading = true
        try {
          const res: any = await matchingProduct([route.query.id])
          if (res.code == 'SUCCESS') {
            Message.success('更新成功')
            getDetail()
          }
        } catch (error) {}

        data.updateUserLoading = false
      }

      const getListVOByParam = async () => {
        let params = {
          orderIdList: route.query.id,
          ...data.searchValue,
        }
        const res = await listVOByParam(params)
        data.financialDataList = res?.data || []
      }

      const getSyncAmzOrderFinancials = async () => {
        data.getOrderFinanceLoading = true
        try {
          await syncAmzOrderFinancials({ orderId: route.query.id, dataSource: 'es' })
          Message.success('更新成功')
          data.getOrderFinanceLoading = false
        } catch (error) {
          data.getOrderFinanceLoading = false
        }
        getListVOByParam()
      }

      const getTitle = (title: string) => {
        // '收益(' + detailInfo.currency + ')'
        if (data.detailInfo.currency) {
          return `${title}(${data.detailInfo.currency})`
        } else {
          return title
        }
      }

      const filterPackage = (item: any) => {
        return item.packageList && item.packageList[0] ? item.packageList[0] : {}
      }

      getDetail()
      getListVOByParam()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        filterLevel,
        filterStatus,
        updateSacles,
        getSyncAmzOrderFinancials,
        getTitle,
        filterPackage,
      }
    },
  })
</script>

<style lang="less" scoped>
  .con {
    height: calc(100vh - @menuHeight);
    font-size: 12px;
    .layout-con {
      width: 100%;
      height: 100%;
    }
    .sider {
      width: 280px !important;
      height: 100%;
      padding: 5px 10px;
      overflow: hidden;
      .title {
        font-size: 16px;
        font-weight: 700;
      }
      .order-billno {
        display: flex;
      }

      ul {
        li {
          display: flex;
          margin-bottom: 5px;
        }
      }

      span {
        display: inline-block;
      }

      .label-text {
        color: #aaaaaa;
        width: 100px;
      }
    }
    .content {
      margin-left: 5px;
      // display: flex;
      .top {
        // height: 100px;
        padding: 10px;
        box-sizing: border-box;
        background-color: white;
        position: relative;
        .log {
          position: absolute;
          right: 10px;
          top: 10px;
        }
        span {
          display: inline-block;
        }
        .status {
          height: 20px;
          line-height: 20px;
          text-align: center;
          margin: 10px 10px;
          padding: 0 10px;
          box-sizing: border-box;
          color: white;
          background-color: #169bd5;
          border-radius: 10px;
        }

        .type {
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: black;
          padding: 0 10px;
          background-color: #facd91;
        }
      }
      .middle {
        margin: 5px 0;
        display: flex;
        .left {
          width: 800px;
          background-color: white;
          padding: 10px;
          .title {
            font-size: 16px;
            margin-bottom: 10px;
          }
          .left-con {
            width: 100%;
            ul {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              li {
                width: 50%;
                margin-bottom: 10px;
              }
            }
          }
        }
        .right {
          flex: 1;
          margin-left: 5px;
          background-color: white;
          padding: 5px;
          box-sizing: border-box;
          .title {
            font-size: 16px;
            margin-bottom: 10px;
          }
          .right-con {
            height: 200px;
            overflow: auto;
            ul {
              li {
                .top {
                  display: flex;
                  div {
                    &:nth-child(1) {
                      width: 20px;
                      height: 20px;
                      text-align: center;
                      line-height: 20px;
                      background-color: #169bd5;
                      color: white;
                      border-radius: 50%;
                    }
                    &:nth-child(2) {
                      margin: 0 5px;
                    }
                    &:nth-child(3) {
                      color: #aaaaaa;
                    }
                  }
                }

                .text {
                  padding: 0 10px;
                }
              }
            }
          }
        }
      }

      .footer {
        // height: 100%;
        background-color: white;
        .tab-pane {
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }

  .cut-down-time {
    :deep(.arco-statistic-value) {
      font-size: 12px;
      color: red;
      margin-left: 10px;
    }
  }
</style>
